<template>
  <section class="dialog">
    <div class="mask"></div>
    <div class="dialog-content">
      <h3 class="title">{{ modal.title }}</h3>
      <p class="text">{{ modal.text }}</p>
      <div class="btn-group">
        <div class="btn" @click="cancel">{{ modal.cancelButtonText }}</div>
        <div class="btn" @click="submit">{{ modal.confirmButtonText }}</div>
      </div>
    </div>
  </section>
</template>

<script>
export default {
  props: {
    dialogOption: Object
  },
  data () {
    return {
      resolve: '',
      reject: '',
      promise: '' // 保存promise对象
    };
  },
  computed: {
    modal: function () {
      let options = this.dialogOption;
      return {
        title: options.title || '提示',
        text: options.text,
        cancelButtonText: options.cancelButtonText
          ? options.cancelButtonText
          : '取消',
        confirmButtonText: options.confirmButtonText
          ? options.confirmButtonText
          : '确定'
      };
    }
  },
  methods: {
    // 确定,将promise断定为完成态
    submit () {
      this.resolve('submit');
    },
    // 取消,将promise断定为reject状态
    cancel () {
      this.reject('cancel');
    },
    // 显示confirm弹出,并创建promise对象，给父组件调用
    confirm () {
      this.promise = new Promise((resolve, reject) => {
        this.resolve = resolve;
        this.reject = reject;
      });
      // 返回promise对象,给父级组件调用
      return this.promise;
    }
  }
};
</script>

<style lang="scss">
.dialog {
  position: relative;

  .dialog-content {
    position: fixed;
    box-sizing: border-box;
    padding: 20px;
    min-height: 140px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 5px;
    background: #fff;
    z-index: 50002;
    .title {
      font-size: 16px;
      font-weight: 600;
      line-height: 30px;
    }
    .text {
      font-size: 14px;
      line-height: 30px;
      color: #555;
    }
    .btn-group {
      display: flex;
      position: absolute;
      right: 0;
      bottom: 10px;
      .btn {
        padding: 10px 20px;
        font-size: 14px;
        &:last-child {
          color: #76d49b;
        }
      }
    }
  }
  .mask {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 50001;
    background: rgba(0, 0, 0, 0.5);
  }
}
</style>
